<template>
    <div class="container">
        <div class="up">
            <Banner />
        </div>
        <div class="mid">
            <div class="guideList">
                <router-link class="guide bg_skybule" to="/about"
                    >About</router-link
                >
                <router-link class="guide bg_orange" to="/home"
                    >Home</router-link
                >
            </div>
            <div class="content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import Banner from "./components/Banner.vue";
import About from "./pages/About.vue";
import Home from "./pages/Home.vue";
export default {
    name: "App",
    components: {
        Banner,
        About,
        Home,
    },
};
</script>

<style scoped>
.container {
    width: 60%;
    margin: 20px auto 0;
    height: 200px;
}

.up {
    margin: 10px 0;
}

.mid {
    display: flex;
    height: 100%;
}

.guideList {
    width: 25%;
    display: flex;
    flex-direction: column;
}

.guide {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    text-decoration: none;
}

.bg_skybule {
    background-color: skyblue;
}

.bg_orange {
    background-color: orange;
}

.content {
    width: 75%;
    height: 100;
    background-color: burlywood;
}
</style>
